<template>
  <div class="news">
    <h3><span>新闻</span></h3>
    <van-tabs
      v-model="active"
      title-active-color="red"
      line-width="0"
      @click="changNews()"
    >
      <van-tab v-for="item in typeList" :key="item.id" :title="item.name">
        <div
          class="news-content-item"
          v-for="item in newsList"
          :key="item.id"
          @click="goToNews(item.id)"
        >
          <div class="item-left">
            <img :src="'http://124.93.196.45:10001' + item.cover" />
          </div>
          <div class="item-right">
            <div class="item-right-top">
              <h4>{{ item.title }}</h4>
            </div>
            <div class="item-right-mid" v-html="item.content"></div>
            <div class="item-right-bottom">
              <span>浏览：{{ item.readNum }}</span>
              <span>评论：{{ item.commentNum }}</span>
              <span>时间：{{ item.createTime }}</span>
              <span
                class="item-right-bottom-like"
                @click.stop="likeNew(item.id)"
              >
                点赞：{{ item.likeNum }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-pagination
        v-model="info.pageNum"
        :page-count="totalPage"
        mode="simple"
        @change="pageChange"
      />
    </van-tabs>
  </div>
</template>

<script>
import { getNewsType, getNewsList, likeNew } from "@/service/news";
export default {
  data() {
    return {
      active: 0,
      typeList: [], //新闻类型
      newsList: [],
      totalPage: "", // newsList 总数
      //默认请求list数量与页数
      info: {
        pageSize: 10,
        pageNum: 1, // 当前页码
      },
    };
  },
  methods: {
    //翻页功能
    pageChange() {
      this.getNewsListData(this.info);
    },
    // 新闻点赞
    async likeNew(id) {
      const { data } = await likeNew(id);
      if (data.code !== 200) return this.$toast(data.msg);
      this.getNewsListData();
    },
    goToNews(id) {
      if (this.$route.path === "/news") {
        this.$route.query.id = id;
        this.$emit("changflag", true);
      } else {
        this.$router.push(`/news?id=${id}`);
      }
    },
    // 切换newtype
    changNews() {
      const id = this.typeList[this.active].id;
      this.getNewsListData({ type: id });
    },
    //获取 new分类
    async getNewsTypeList() {
      const { data } = (await getNewsType()) || {};
      if (data.code !== 200) this.$toast(data.msg);
      this.typeList = data.data;
    },
    // 获取new列表
    async getNewsListData(info = this.info) {
      const { data } = await getNewsList(info);
      if (data.code !== 200) this.$toast(`${data.msg}`);
      this.totalPage = Math.ceil(data.total / 10);
      data.rows.forEach((item) => {
        item.createTime = item.createTime.slice(0, 10); // 处理空格
        item.content = item.content.replace(" ", ""); // 处理空格
        item.content = item.content.replace(/<p>&nbsp;<\/p>/g, ""); // 处理空格
        item.content = item.content.replace(/<p><br><\/p>/g, ""); // 处理返回数据中的换行
        //处理返回数据中地址
        item.content = item.content.replace(
          /\/prod-api/g,
          "http://124.93.196.45:10001/prod-api"
        );
      });
      this.newsList = data.rows;
      // console.log(this.newsList);
    },
  },
  created() {
    this.getNewsTypeList();
    this.getNewsListData();
  },
};
</script>

<style lang="scss" scoped>
.news {
  margin-top: 10px;
  // margin-left: 15px;
  // margin-right: 15px;
  h3 {
    background: #fff;
    span {
      color: #333;
      margin-left: 20px;
      width: 60px;
      border-bottom: 5px solid #ee7f3a;
    }
  }
  .van-tabs__content {
    .van-tab__pane {
      padding-left: 15px;
      padding-right: 15px;
    }
  }
  .news-content-item {
    background: #fff;
    height: 150px;
    margin-top: 10px;
    display: flex;
    width: 100%;
    border-bottom: 1px solid #eee;
    // overflow: hidden;
    .item-left {
      margin: auto;
      margin-right: 10px;
      img {
        width: 120px;
        height: 120px;
      }
    }
    ::v-deep .item-right {
      overflow: hidden;
      .item-right-top {
        overflow: hidden;
        h4 {
          color: #333;
          font-weight: 700;
          font-size: 18px;
          height: 30px;
          line-height: 30px;
          display: -webkit-box; //对象作为弹性伸缩盒子模型显示
          overflow: hidden; //溢出隐藏
          -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
          -webkit-line-clamp: 1; //设置 块元素包含的文本行数
        }
      }
      .item-right-mid {
        box-sizing: border-box;
        overflow: hidden;
        height: 60px;
        display: -webkit-box; //对象作为弹性伸缩盒子模型显示
        overflow: hidden; //溢出隐藏
        -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
        -webkit-line-clamp: 4; //设置 块元素包含的文本行数

        p {
          font-size: 14px;
          line-height: 15px;
        }
        img {
          display: none;
        }
      }
      .item-right-bottom {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
        span {
          width: 50%;
          font-size: 12px;
          height: 12px;
          line-height: 12px;
          color: #333;
          margin-bottom: 5px;
        }
        .item-right-bottom-like {
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 3;
        }
      }
    }
  }
  .van-pagination {
    margin-top: 10px;
  }
}
</style>
